<template>
  <div :class="`right_side_drawer ${isOpen ? 'open' : 'close'}`">
    <div class="icon_switch" id="switch" @click="changeIsOpen">
      <span class="title">填报说明</span>
    </div>
    <div class="menu_detail">
      <h3 style="text-indent:2em;">
        填报金额相关数据均以万元为单位，保留2位小数；填报日期相关数据，表格属性为日期型，格式为xxxx年x月；设计下拉列表选项的，务必根据下拉列表选择填列。具体表格填报说明如下:
      </h3>
      <ol>
        <li>由各工程局填报；</li>
        <li>填报范围为：截至2021年12月31日久竣未结、已竣未结和已竣已结未销号工程项目（具体见专项审计调查方案）；</li>
        <li>工程项目以与业主签订的施工合同为依据判定；</li>
        <li>项目类型分为：铁路、公路、城轨、市政、房建、水利水电、其他，根据下拉列表选择填列；</li>
        <li v-if="isJnxm">项目所在地，境内项目格式按照“XX省XX市”填写；</li>
        <li v-if="!isJnxm">项目所在地，境外项目格式按照“**国家**地区”填写；</li>
        <li v-if="isJnxm">
          境内项目业主类别分为：政府,国有企事业单位,民营企业,股份公司所属投资公司,股份公司总包部，根据下拉列表选择填列；
        </li>
        <li v-if="!isJnxm">
          境外项目业主类别：所在国政府、所在国企业、中国政府、中国企业、其他，根据下拉列表选择填列；
        </li>
        <li>项目状态分为：久竣未结，已竣未结，已竣已结3种状态，根据下拉列表选择填列；</li>
        <li>
          实际交工验收日期：铁路项目为完成建设工程设计或正式通车日期（不包含克缺工程）；公路项目为交工验收日期；城轨项目为项目工程验收完成日期；水利水电项目为工程阶段性验收全部完成日期；市政工程、房建工程为竣工验收日期。其它工程或未按程序交验的工程具体以审计组综合考虑认定为准。
        </li>
        <li>开累账面利润，填报截至2022年9月末账面利润，并将计提的上级管理费和收取项目资金占用费还原为账面利润。</li>
        <li>
          合同履约成本-工程施工，填列截至2022年9月末项目合同履约成本-工程施工-合同成本，如有研发费用，则加研发费用；
        </li>
        <li>待批复验工计价与明细表1《待批复变更索赔明细表》数据一致；</li>
        <li>
          已发生未列账成本，填列包括未结算、未入账、未结转劳务、材料、机械等成本，与明细表2《截至2022年9月末已发生未列账成本明细表》数据一致。
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    isJnxm: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      isOpen: false,
    }
  },
  methods: {
    changeIsOpen() {
      this.isOpen = !this.isOpen
    },
  },
}
</script>

<style lang="less" scoped>
.right_side_drawer {
  height: 62%;
  width: 450px;
  position: fixed;
  right: 0;
  top: 22%;
  padding: 10px 0px 10px 10px;
  display: flex;
  z-index: 100;
  transform: translateX(385px);
  overflow-y: scroll;
  pointer-events: none;
}
.right_side_drawer>div{
   pointer-events:auto;
}
.icon_switch {
  width: 55px;
  height: 125px;
  writing-mode: vertical-lr;
  text-align: center;
  background-color: rgb(57, 86, 166);
  border-top-left-radius: 20px;
  border-bottom-left-radius: 20px;
  font-size: 20px;
  font-weight: 500;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  cursor: pointer;
  pointer-events:auto;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
  .title {
    &::before {
      content: '*';
      color: red;
      display: inline-block;
      margin-bottom: 5px;
    }
  }
}

.menu_detail {
  width: calc(100% - 60px);
  height: 100%;
  background-color: rgb(243, 246, 255);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  padding: 30px 15px;
  box-sizing: border-box;
  overflow-y: scroll;
  h3 {
    color: red;
  }
  ol {
    color: red;
    li {
      margin-top: 10px;
    }
  }
}

.open {
  transform: translateX(10px);
  transition: transform 0.3s linear;
}

.close {
  transform: translateX(385px);
  transition: transform 0.3s linear;
}
</style>